<template>
  <div class="order-list">
    <page-header title="订单列表" class="order-list-header">
      <page-search
        :config="searchConfig"
        :model="searchModel"
        @search="getData"
      >
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="exportExcel">导出订单</el-button>
      </page-search>
    </page-header>
    <el-table
      :data="tableData"
      :max-height="clientHeight - 320"
      >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :min-width="column.minWidth"
        :label="column.label">
        <template slot-scope="{ row }">
          <el-popover trigger="hover" v-if="column.prop === 'buyer'" placement="top">
            <div>{{row.buyerPhone}}</div>
            <div>{{row.address}}</div>
            <span slot="reference">{{row.buyer}}</span>
          </el-popover>
          <template v-else>
            {{row[column.prop]}}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="80px"
      >
        <template slot-scope="{ row }">
          <action-text @click="delivery(row)">发货</action-text>
        </template>
      </el-table-column>
    </el-table>
    <page-pagination
      :pageSize="pageSize"
      :currentPage="pageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination';
import { ORDER_TYPE, ORDER_STATUS_MAP } from '@/utils/constants';
import { saveExcel } from '@/utils';
import { getOrderList } from '@/api/order';
import { searchConfig, columns, schemaMap } from './config';

const searchModel = {
  orderNo: '',
  timeRange: '',
  linkName: '',
  phone: '',
  courseName: '',
  courseMaterialName: '', // 辅材名称
  pointsGift: '', // 积分礼品名称
  orderStatus: '',
  orderType: '',
};

export default {
  data() {
    return {
      searchConfig,
      searchModel: { ...searchModel },
      columns,
      tableData: [],
    };
  },
  mixins: [paginationMixin],
  computed: {
    formatParams() {
      const [startTime, endTime] = this.searchModel.timeRange;
      const params = {
        ...this.searchParams,
        startTime,
        endTime,
      };
      delete params.timeRange;
      return params;
    },
  },
  methods: {
    resetSearch() {
      this.searchModel = { ...searchModel };
    },
    delivery() {

    },
    async exportExcel() {
      const { list } = await getOrderList({
        ...this.formatParams,
        pageSize: this.total,
        pageNum: 0,
      });
      const sheetData = list.map((item) => {
        const {
          orderType, orderStatus, courseMaterialNameList,
          courseNameList, scoreGiftNameList, actualPrice, createTime,
        } = item;
        return {
          ...item,
          orderType: ORDER_TYPE[orderType],
          orderStatus: ORDER_STATUS_MAP[orderStatus],
          courseMaterialName: (courseMaterialNameList || []).join('，'),
          courseName: (courseNameList || []).join('，'),
          scoreGiftName: (scoreGiftNameList || []).join('，'),
          actualPrice: actualPrice / 100,
          createTime: this.$formatTime(createTime),
        };
      });
      saveExcel({
        schemaMap,
        sheetData,
        fileName: '订单列表',
      });
    },
    async getData() {
      const { list, total } = await getOrderList(this.formatParams);
      this.total = total;
      this.tableData = list.map((item) => {
        const {
          orderType, orderStatus, courseMaterialNameList,
          courseNameList, scoreGiftNameList, actualPrice, createTime,
        } = item;
        return {
          ...item,
          orderType: ORDER_TYPE[orderType],
          orderStatus: ORDER_STATUS_MAP[orderStatus],
          courseMaterialName: (courseMaterialNameList || []).join('，') || '无',
          courseName: (courseNameList || []).join('，'),
          scoreGiftName: (scoreGiftNameList || []).join('，') || '无',
          actualPrice: actualPrice / 100,
          createTime: this.$formatTime(createTime),
        };
      });
    },
  },
  async created() {
    this.getData();
  },
};
</script>
